<?php get_header(); ?>

<div class="container">
    <? while (have_posts()) : the_post(); ?>
    <?php
    $booking = get_the_ID();
    $slot = getSlotID($booking);
    $pitch = getPitchID($booking);
    $venue = getVenueID($booking);
    ?>

    <div>
        <?
        global $user_ID, $current_user;

        $current_user = wp_get_current_user();
        get_currentuserinfo();
        if (get_field('customer_id',get_the_ID()) != $user_ID) {
            ?>
            <h1>Restricted Access!</h1>
            <div class="alert">You do not have access to this section</div>
                <a class="btn btn-primary" href="/" style="font-weight: 800">Home &raquo;</a>
            <?
        } else {
        ?>

            <a href="/my-account/?" class="btn btn-inverse btn-small pull-right" style="font-weight: 800;margin-bottom: 0">&laquo; My Account</a>
        <h1>Booking Information</h1>

        <div class="row-fluid">
            <div class="span12">
                    <!--
                    From <? echo get_field('start_time', $slot); ?> until <? echo get_field('end_time', $slot); ?> on <a href="<? echo get_permalink($pitch) ?>"><? echo get_field('pid', $pitch); ?></a> at <a href="<? echo get_permalink($venue) ?>"><? echo get_field('name', $venue); ?></a>
                    -->

                    <table class="table table-striped table-condensed table-bordered" style="margin-bottom: 20px">
                        <tbody>
                        <tr>
                            <th>Booking Name</th>
                            <td><? echo get_field('first_name', 'user_'.$user_ID) ?></td>
                        </tr>
                        <tr>
                            <th>Venue</th>
                            <td><? echo get_field('name', $venue) ?></td>
                        </tr>
                        <tr>
                            <th>Pitch</th>
                            <td><? echo get_field('pid', $pitch) ?></td>
                        </tr>
                        <tr>
                            <th>Date</th>
                            <td><? echo date('l, j F Y', strtotime(get_field('date', $booking))) ?></td>
                        </tr>
                        <tr>
                            <th>Start</th>
                            <td><? echo get_field('start_time', $booking) ?></td>
                        </tr>
                        <tr>
                            <th>End</th>
                            <td><? echo get_field('end_time', $booking) ?></td>
                        </tr>
                        <tr>
                            <th>Price</th>
                            <td><? echo '&pound;' . get_field('price', $booking) ?></td>
                        </tr>
                        </tbody>
                    </table>
            </div>
        </div>

        <div class="row-fluid">
            <div class="span12" style="margin-bottom:15px;">
                <span data-email-booking="<? echo $booking ?>" data-email-booking-name="<? echo get_field('name',$booking) ?>" class="btn btn-info btn-small " style="font-weight: 800;margin-bottom: 0;margin-right:10px"><i class="icon-envelope-alt"></i> Email Booking Info</span>
                <a href="/add-team/?b=<? echo $booking ?>" class="btn btn-primary btn-small add-team" style="font-weight: 800;margin-bottom: 0"><i class="icon-plus"></i> Add Team</a>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span6">
                <div class="card grey" id="team1">
                    <? printTeam(1,$booking) ?>
                </div>
            </div>

            <div class="span6">
                <div class="card grey" id="team2">
                    <? printTeam(2,$booking) ?>
                </div>
            </div>
        </div>


        <?
        }
        ?>
    </div>

    <? endwhile; ?>
</div>

<?php get_footer(); ?>

<!-- Email Modal -->
<div id="EmailModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="emailModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="EmailModalLabel">Email <span class="team_name"></span> Players</h3>
    </div>
    <div class="modal-body">

        <div class="alert alert-info">This will send an email to all of the players listed and provide the venue and booking details.</div>

        <form id="EmailForm" class="form">
            <input type="hidden" id="form_booking" name="form_booking" value="<? echo $booking ?>" />
            <input type="hidden" id="form_user" name="form_user" value="<? echo get_user_id() ?>" />

            <label class="control-label" for="Comments" style="font-weight: 800">Extra Comments</label>

            <textarea id="Comments" name="form_comments" style="width: 516px;height: 100px;"></textarea>
        </form>
    </div>
    <div class="modal-footer">
        <span id="EmailFormSubmit" data-dismiss="modal" class="btn btn-primary"><i class="icon-envelope-alt"></i> Send Email</span>
    </div>
</div>

<script>
    $(function () {


        $('#team1 select').on('change',function () {
            var team = $(this).val();
            $('#team1 [data-team]').hide();
            $('#team1 [data-team="'+team+'"]').show();
        });

        $('#team2 select').on('change',function () {
            var team = $(this).val();
            $('#team2 [data-team]').hide();
            $('#team2 [data-team="'+team+'"]').show();
        });

        $('#change1').val('<? echo get_field('team1',$booking) ?>');
        $('#change2').val('<? echo get_field('team2',$booking) ?>');
        $('#change1, #change2').trigger('change');
        $('#change1, #change2').off('change');


        $('#team1 select').on('change',function () {
            var team = $(this).val();
            $('#team1 [data-team]').hide();
            $('#team1 [data-team="'+team+'"]').show();

            var obj = {};
            obj.data = {};
            obj.action = 'set_team1';
            obj.data.team = team;
            obj.data.booking = <? echo $booking ?>;

            PW.ajax(obj, function (response) {});
        });

        $('#team2 select').on('change',function () {
            var team = $(this).val();
            $('#team2 [data-team]').hide();
            $('#team2 [data-team="'+team+'"]').show();

            var obj = {};
            obj.data = {};
            obj.action = 'set_team2';
            obj.data.team = team;
            obj.data.booking = <? echo $booking ?>;

            PW.ajax(obj, function (response) {});
        });

        $('#team2 select').on('change',function () {
            var team = $(this).val();
            $('#team2 [data-team]').hide();
            $('#team2 [data-team="'+team+'"]').show();

            var obj = {};
            obj.data = {};
            obj.action = 'set_team2';
            obj.data.team = team;
            obj.data.booking = <? echo $booking ?>;

            PW.ajax(obj, function (response) {});
        });

        $(document).on('click','[data-remove-team]',function () {
            var team = $(this).attr('data-remove-team');

            var obj = {};
            obj.data = {};
            obj.action = 'remove_team';
            obj.data.team = team;

            PW.ajax(obj, function (response) {
                window.location.replace(document.URL);
            });
        });

        $(document).on('click','[data-email-team]',function () {
            var team = $(this).attr('data-email-team');
            var name = $(this).attr('data-email-team-name');

            $('#form_team').val(team);
            $('.team_name').html(name);

            $('#EmailModal').modal('show');
        });

        $(document).on('click','[data-email-booking]',function () {
            var name = $(this).attr('data-email-booking-name');

            $('#EmailModal').modal('show');
        });

        $(document).on('click', '#EmailFormSubmit', function () {
            $('#EmailForm').trigger('submit');
        });

        $(document).on('submit', '#EmailForm', function () {
            var formData = $('#EmailForm').serializeObject();

            var obj = {};
            obj.action = 'email_booking';
            obj.form = formData;

            PW.ajax(obj,function(response){

            });
            return false;
        });



    });
</script>

<?

function printTeam($number, $booking) {
    ?>
<h2>Team <? echo $number ?></h2>

<select id="change<? echo $number ?>">
    <option value=""></option>
    <?
    $team_query = new WP_Query(array('post_type' => 'team', 'showposts' => 10000));
    while ($team_query->have_posts()) : $team_query->the_post();
        $team = $team_query->post->ID;
        if (get_field('user',$team) == get_user_id()) {
            echo "<option value='$team'>".get_field('name',$team).'</option>';
        }
    endwhile;
    ?>
</select>


<?
$team_query = new WP_Query(array('post_type' => 'team', 'showposts' => 10000));
while ($team_query->have_posts()) : $team_query->the_post();
    $team = $team_query->post->ID;
    if (get_field('user',$team) == get_user_id()) {
        ?>
        <div style="display: none" data-team='<? echo $team ?>'>
            <table class="table table-condensed table-bordered table-striped" id="playersTable">
                <thead>
                <tr>
                    <th style="width: 40px;"></th>
                    <th>Name</th>
                    <th>Email</th>
                </tr>
                </thead>
                <tbody>
                <?
                $players = json_decode(get_field('players',$team), true);
                foreach ($players as $key => $value) {
                    echo "<tr data-player='$key' data-player-name='".$value['name']."' data-player-email='".$value['email']."'>";
                    echo "<td><img src='http://dev.pitchwise.co.uk/wp-content/themes/pitchwise/img/T-".get_field('colour',$team).".png' style='width:40px;height:40px;'></td>";
                    echo "<td style='vertical-align: middle'>$value[name]</td>";
                    echo "<td style='vertical-align: middle'>".$value['email']."</td>";
                    echo "</tr>";
                }
                ?>

                </tbody>
            </table>

            <a href="<? echo get_permalink($team).'?booking='.$booking ?>" class="btn btn-small " style="font-weight: 800;margin-bottom: 0;margin-right:10px;"><i class="icon-pencil"></i> Edit Team</a>
            <span data-remove-team="<? echo $team ?>" class="btn btn-danger btn-small " style="font-weight: 800;margin-bottom: 0;float:right;"><i class="icon-remove"></i> Remove Team</span>
        </div>
    <?
    }
endwhile;

}

?>